<template>
	<view class="warning-control-detail">
		<titleName :name="name" :backShow="true"></titleName>
		<view class="sel-wrap">
			<view class="warning-detail">
				<view :class="[selVal==1?'name active':'name']" @click="updateSel(1)">预警详情</view>
				<view class="line" v-show="selVal==1"></view>
			</view>
			<view class="'control-enterprise">
				<view :class="[selVal==2?'name active':'name']" @click="updateSel(2)">管控企业</view>
				<view class="line" v-show="selVal==2"></view>
			</view>
		</view>
		<view class="warning-detail-wrap" v-if="selVal==1">
			<view
				:class="[objData?.notice?.colorlevel==1?'red':objData?.notice?.colorlevel==2?'orange':objData?.notice?.colorlevel==3?'yellow':'']">
			</view>
			<view class="publish-content">
				<view class="title">
					{{objData?.notice?.colorlevel==1?'红色预警（I级）':objData?.notice?.colorlevel==2?'橙色预警（II级）':objData?.notice?.colorlevel==3?'黄色预警（III级）':''}}
				</view>
				<view class="publisher">
					<image :src="resourceUrl+'login-huanbao-bgc.png'" mode=""></image>
					<view class="content">
						<view class="name">{{objData?.notice?.publisher}}</view>
						<view class="publish-time">
							<view class="publish">发布</view>
							<view class="time">{{objData?.notice?.publishdate}}</view>
						</view>
					</view>
				</view>
				<view class="control-time">启警时间：{{objData.notice?.monitortimestr}}
				</view>
			</view>
			<view class="enterprise-statis">
				<view class="wrap">
					<view class="control-num">
						<view class="name">管控企业数</view>
						<view class="val">{{objData.num_enterprise_all}}</view>
					</view>
					<view class="execute">
						<view class="name">已执行企业</view>
						<view class="val">{{objData.num_enterprise_follow}}</view>
					</view>
					<view class="no-execute">
						<view class="name">未执行企业</view>
						<view class="val">{{objData.num_enterprise_unfollow}}</view>
					</view>
				</view>
			</view>
			<view class="control-down">
				<button @click="endControl"
					:disabled="objData.notice?.status==3">{{objData.notice?.status==3?'已结束':'结束管控'}}</button>
			</view>
			<!-- <view class="measure">
				<view class="title">
					<view class="line"></view>
					<view class="name">减排措施</view>
				</view>
				<view class="content">
					{{objData.notice.content}}
				</view>
			</view> -->
		</view>

		<view class="control-enterprise" v-if="selVal==2">
			<view class="search-wrap">
				<view class="ipt-wrap">
					<!-- 	<uni-data-select v-model="params.followflag" placeholder="状态" :localdata="range"
						@change="change"></uni-data-select>
					<view class="line"></view> -->
					<input type="text" v-model="params.customername" placeholder="输入企业名称"
						placeholder-class="ph-color" />
					<button class="btn" @click="getControlList(1)">查询</button>
				</view>
			</view>
			<view class="select-wrap">
				<uni-data-select v-model="params.followflag" placeholder="执行状态" :localdata="execStatus"
					@change="change1"></uni-data-select>
				<uni-data-select v-model="params.promiseflag" placeholder="签名状态" :localdata="signatureStatus"
					@change="change2"></uni-data-select>
			</view>
			<view class="total-num" v-if="controlList.length>0">
				共<text>{{controlList.length}}/{{total}}</text>个单位
			</view>
			<scroll-view class="list" scroll-y @scrolltolower="scrolltolower">
				<uni-load-more iconType="circle" status="loading" v-if="flagData" />
				<noData v-if="controlList.length==0 && !flagData" />
				<view class="item" v-for="item in controlList" :key="item.id" @click="jumpWarningDetail(item.id)">
					<view class="enterprise-name">企业名称：{{item.customername}}</view>
					<!-- <view class="inform-status">是否收到通知：{{item.viewflag==1?'已查看':'未查看'}}</view> -->
					<view class="inform-status">
						签署承诺书/负责人：<text
							:class="item.promiseflag2==1?'inform-status':'no-inform-status2'">{{item.promiseflag2==1?'已签名':'未签名'}}</text>
					</view>
					<view class="inform-status">
						签署承诺书/法人：<text
							:class="item.promiseflag1==1?'inform-status':'no-inform-status1'">{{item.promiseflag1==1?'已签名':'未签名'}}</text>
					</view>
					<view class="top-appear">
						<view class="name">是否执行并上报：</view>
						<view :class="['val',item.followflag==1?'':'no-done']">
							{{item.followflag==1?'已执行':'未执行'}}
						</view>
					</view>
					<view class="person">
						环保管理员：{{item.hbperson}}
					</view>
					<view class="phone">
						手机号：{{item.hbmobile}}
					</view>

					<view class="address">
						地址：{{item.customeraddress}}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="mask" v-if="maskFlag">
			<view class="container" v-if="!maskSend">
				<view class="title">结束时间</view>
				<view class="date">
					<uni-datetime-picker v-model="maskTime" :hide-second="true" type="datetime" @change="dateChange">

					</uni-datetime-picker>
				</view>
				<view class="btn-wrap">
					<button @click="sure" class="sure">确认</button>
					<button @click="maskFlag=false" class="del">返回</button>
				</view>
			</view>
			<view class="send-down" v-if="maskSend">
				<image class="suc" :src="resourceUrl+'send-suc.png'" mode=""></image>
				<text>已发送！</text>
			</view>
			<image class="error" @click="maskFlag=false" :src="resourceUrl+'black-err.png'"></image>
		</view>
	</view>

</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from "@/components/noDataShow.vue"
	import http from '../../request/index.js'
	import {
		resourceUrl
	} from '../../request/config'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		watch
	} from 'vue'
	let detail = ref({})
	let value = ref('0')
	let maskFlag = ref(false)
	let maskTime = ref('')
	let maskSend = ref(false)
	let page = ref(1)
	let pagesize = ref(10)
	let params = reactive({
		followflag: '',
		page: 1,
		pagesize: 10
	})
	let disposeContent = (str) => {
		let preContent = str.substring(5, str.length).split('[[END]]')
		let clearEnd = str.replace(/\[\[END\]\]/g, '')

		return {
			preContent: preContent[0],
			clearEnd
		}

	}
	let resetParams = () => {
		controlList.value.length = 0
		params.page = 1
		params.pagesize = 10
	}
	let dateChange = (e) => {
		let arr = e.split(":")
		arr.push('00')
		arr = arr.join(':')
		console.log(arr);
	}
	let execStatus = [{
		value: 1,
		text: '已执行'
	}, {
		value: 0,
		text: '未执行'
	}]
	let signatureStatus = [{
		value: 1,
		text: '已签名'
	}, {
		value: 0,
		text: '未签名'
	}]

	let change1 = () => {
		resetParams()
		getControlList()
	}
	let change2 = () => {
		resetParams()
		getControlList()
	}
	let selVal = ref(1)
	let controlList = ref([])
	let fielNameList = ref([{}])
	let fielUrlList = ref([])
	let flagData = ref(true)
	let total = ref('')
	let name = ref("橙色预警")
	let change = () => {}
	let ids = ref('')
	let objData = ref({})
	let updateSel = (val) => {
		selVal.value = val
		if (val == 2) {
			getControlList()
		}


	}
	let sure = () => {

		http({
			url: '/greenAdmNotice/doEndNotice',
			data: {
				id: ids.value,
				monitorendtime: maskTime.value,

			}
		}).then((res) => {
			if (res.code == 0) {
				maskSend.value = true
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		})
	}
	let getControlList = (num) => {
		if (num == 1) {

			resetParams()
		}
		flagData.value = true
		// controlList.value.length = 0
		http({
			url: "/greenAdmNotice/getRecvEnterpriseList",
			data: params
		}).then((res) => {
			if (res.code == 0) {

				// controlList.value = res.data.list
				controlList.value.push(...res.data.list)
				flagData.value = false
				total.value = res.data.total
			}
		})
	}
	let jumpWarningDetail = (id) => {
		uni.navigateTo({
			url: `/homePageOther/enterprisewarningcontroldetail/index?id=${ids.value}&&enterpriseid=${id}`
		})
	}
	let endControl = () => {
		maskFlag.value = true
	}

	let scrolltolower = () => {
		console.log('-=-=');
		if (total.value === controlList.value.length) return
		params.page += 1
		getControlList()
	}
	onLoad((e) => {
		ids.value = e.id
		params.noticeid = e.id

		if (e.colorlevel == 1) {
			name.value = '红色预警'
		} else if (e.colorlevel == 2) {
			name.value = '橙色预警'
		} else {
			name.value = '黄色预警'
		}
		http({
			url: '/greenAdmNotice/noticeSumInfo',
			data: {
				id: e.id
			}
		}).then((res) => {
			if (res.code == 0) {
				objData.value = res.data
			}
			flagData.value = false
		})

	})
</script>

<style lang="scss" scoped>
	:deep(.uni-select) {

		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		padding: 0;
		border: none;
	}

	:deep(.uni-select__input-box) {

		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;

	}

	:deep(.uni-date) {
		width: 100%;
		height: 92rpx;
		line-height: 92upx;
		border: none !important;
	}

	:deep(.uni-date-x) {

		background: #FAFAFA;
	}

	:deep(.uni-date-x--border) {
		border: none !important;
	}

	:deep(.select-wrap .uni-select) {
		width: 313rpx;
		height: 59rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 0 45upx;
		border: 1px solid #999999;
	}

	:deep(.uni-icons) {
		font-size: 34upx !important;
	}

	:deep(.uni-select__selector) {
		width: 130upx;
	}

	:deep(.ph-color) {


		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;


	}

	.warning-control-detail {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #F3F5F7;

		.mask {
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, .7);
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			.error {
				margin-top: 56upx;
				width: 58upx;
				height: 58upx;
			}

			.send-down {
				width: 587rpx;
				height: 547rpx;
				background: #FFFFFF;
				border-radius: 21rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.suc {
					width: 288upx;
					height: 241upx;

				}

				text {
					margin-top: 68upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 42rpx;
					color: #000000;

				}
			}

			.container {
				width: 587rpx;
				height: 547rpx;
				background: #FFFFFF;
				border-radius: 21rpx;
				padding: 45upx 31upx 0 36upx;

				.title {

					font-family: Source Han Sans CN;
					font-weight: 500;
					font-size: 33rpx;
					color: #000000;

				}

				.date {
					width: 100%;
					margin-top: 32upx;
					height: 92rpx;
					background: #FAFAFA;
					border-radius: 14rpx;
					border: 1px solid #BFBFBF;
					overflow: hidden;
					padding-left: 10upx;
				}

				.btn-wrap {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 197upx 20upx 0 15upx;

					.sure {
						width: 225rpx;
						height: 78rpx;
						background: #0874FA;
						border-radius: 39rpx;

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 34rpx;
						color: #FFFFFF;
						line-height: 78upx;

					}

					.del {
						line-height: 78upx;

						width: 225rpx;
						height: 78rpx;
						background: #FA7408;
						border-radius: 39rpx;

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 34rpx;
						color: #FFFFFF;

					}
				}
			}
		}

		.control-enterprise {
			.list {
				height: calc(100vh - 160upx - 103upx - 67upx - 21upx - 68upx - 110upx);
				width: 100vw;
				overflow-y: scroll;
				padding: 0 22upx 0upx 22upx;

				.item:first-child {
					margin-top: 0upx !important;
				}

				.item {
					margin-top: 30upx;
					background: #fff;
					width: 707upx;
					padding-left: 40upx;
					padding-top: 32upx;
					padding-bottom: 40upx;
					border-radius: 14rpx;

					.enterprise-name {

						font-family: Source Han Sans CN;
						font-weight: 500;
						font-size: 31rpx;
						color: #222222;

					}

					.inform-status {

						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						margin: 30upx 0 28upx 0;

					}

					.no-inform-status1 {
						color: #FF0000;
					}

					.no-inform-status2 {
						color: #FF0000;
					}


					.top-appear {
						display: flex;
						align-items: center;

						.name {

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 28rpx;
							color: #666666;

						}

						.val {
							width: 79rpx;
							height: 35rpx;
							background: rgb(206, 227, 254);
							border-radius: 7rpx;

							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 19rpx;
							color: #0874FA;
							line-height: 35rpx;
							text-align: center;


						}

						.no-done {
							color: #FF0000;
							background: rgb(255, 204, 204);
						}
					}

					.phone {
						margin-top: 30upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;

					}

					.person {
						margin: 33upx 0;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;

					}

					.address {
						margin-top: 30upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;

					}
				}
			}

			.total-num {

				padding-left: 30upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 23rpx;
				color: #333333;
				margin-bottom: 20upx;

				text {
					color: #0874FA;
				}
			}

			.select-wrap {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20upx 44upx 44upx 32upx;
			}

			.search-wrap {
				width: 750rpx;

				margin-top: 21upx;
				display: flex;
				align-items: center;
				justify-content: center;

				.ipt-wrap {
					display: flex;
					width: 690rpx;
					height: 67rpx;
					background: #fff;
					border-radius: 38rpx;
					padding-left: 14upx;
					align-items: center;

					.line {
						width: 1rpx;
						height: 35rpx;
						background: #E8E8E8;
						margin-left: 19upx;
					}

					input {
						flex-grow: 1;
						padding-right: 100upx;
						padding-left: 30upx;
						height: 67upx;
						font-size: 28upx;
					}



					.btn {
						flex-shrink: 0;
						width: 112rpx;
						height: 67rpx;
						background: #0874FA;
						border-radius: 14rpx;
						line-height: 67upx;
						font-weight: 500;
						font-size: 31rpx;
						color: #FFFFFF;
					}
				}

			}
		}

		.warning-detail-wrap {

			.red,
			.yellow,
			.orange {
				width: 100vw;
				height: 29rpx;
				margin-top: 9rpx;
			}

			.red {
				background: #E13D27;
			}

			.orange {
				background: #F2A63A;
			}

			.yellow {
				background: #EFCF39;
			}

			.measure {
				margin-top: 22upx;
				padding-top: 38upx;
				background-color: #fff;
				padding-bottom: 100upx;

				.content {
					padding-left: 32upx;
					margin-top: 37upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 29rpx;
					color: #333333;
					line-height: 52rpx;

				}

				.title {
					display: flex;
					align-items: center;
					padding-left: 30upx;

					.line {
						width: 8rpx;
						height: 29rpx;
						background: #0874FA;
						border-radius: 4rpx;
						margin-right: 12upx;
					}

					.name {

						font-family: Source Han Sans CN;
						font-weight: bold;
						font-size: 29rpx;
						color: #000000;

					}
				}
			}

			.control-down {
				margin-top: 240upx;
				padding: 0 50upx;

				button {
					width: 100%;
					height: 87rpx;
					background: #0874FA;
					border-radius: 43rpx;

					font-family: PingFang SC;
					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;
					line-height: 87rpx;
					text-align: center;
				}
			}

			.enterprise-statis {
				margin-top: 19upx;
				width: 100vw;
				padding: 0 26upx 0 26upx;


				.wrap {
					width: 100%;
					height: 164rpx;
					background: #FFFFFF;
					border-radius: 21rpx;
					display: flex;
					justify-content: space-between;
					padding: 0 65upx;
					align-items: center;

					.control-num,
					.execute,
					.no-execute {
						display: flex;
						flex-direction: column;

						.name {

							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 23rpx;
							color: #666666;

						}

						.val {
							margin-top: 15upx;
							font-family: FZTanHeiS-B-GB;
							font-weight: 400;
							font-size: 35rpx;
							color: #333333;

						}
					}



					.execute {



						.val {
							margin-top: 15upx;

							font-family: FZTanHeiS-B-GB;
							font-weight: 400;
							font-size: 35rpx;
							color: #0874FA;

						}
					}

					.no-execute {



						.val {
							margin-top: 15upx;

							font-family: FZTanHeiS-B-GB;
							font-weight: 400;
							font-size: 35rpx;
							color: #FF0000;

						}
					}
				}
			}

			.publish-content {
				width: 750rpx;
				height: 259rpx;
				background-color: #fff;
				padding-left: 30upx;
				padding-top: 30upx;


				.title {

					font-family: Source Han Sans CN;
					font-weight: bold;
					font-size: 29rpx;
					color: #070707;

				}

				.control-time {
					margin-top: 36upx;

					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;

				}

				.publisher {
					display: flex;
					align-items: center;
					margin-top: 35upx;

					image {
						width: 55upx;
						height: 55upx;
						margin-right: 10upx;
					}

					.content {
						.name {

							font-family: Source Han Sans CN;
							font-weight: 500;
							font-size: 24rpx;
							color: #070707;

						}

						.publish-time {
							display: flex;
							align-items: center;

							.publish {
								width: 48rpx;
								height: 23rpx;
								background: #EEF2FF;
								border-radius: 6rpx;
								line-height: 23upx;
								text-align: center;
								font-family: Source Han Sans CN;
								font-weight: 500;
								font-size: 14rpx;
								color: #0874FA;
								margin-right: 7upx;

							}

							.time {

								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 22rpx;
								color: #999999;

							}
						}
					}
				}
			}
		}

		.sel-wrap {
			width: 750rpx;
			height: 103rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			padding: 0 153upx;
			justify-content: space-between;


			.warning-detail {
				position: relative;

				.name {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;

				}

				.active {

					font-family: Source Han Sans CN;
					font-weight: bold !important;
					font-size: 28rpx !important;
					color: #000000 !important;

				}

				.line {
					width: 48rpx;
					height: 8rpx;
					background: #0874FA;
					border-radius: 4rpx;
					position: absolute;
					bottom: -10upx;
					left: 50%;
					transform: translateX(-50%);
				}
			}

			.control-enterprise {
				position: relative;

				.name {
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;

				}

				.active {

					font-family: Source Han Sans CN;
					font-weight: bold !important;
					font-size: 28rpx !important;
					color: #000000 !important;

				}

				.line {
					width: 48rpx;
					height: 8rpx;
					background: #0874FA;
					border-radius: 4rpx;
					position: absolute;
					bottom: -10upx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}




	}
</style>